<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试倒计时器看板——通信与电子信息系</title>

    <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>

    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <script src="./bootstrap-4.5.0-dist/js/bootstrap.js"></script>
    <style>
        .djs {
            color: red;
        }

        .top {
            margin-bottom: 20px;
        }

        .ksItem {
            /* min-width: 10%; */
            padding: 10px;
        }
        .itemHimg{
            height: 100px;
            align-items: center;
            overflow: hidden;
        }
        .rematTime{
            color:yellow;
            font-size: larger;
            font-weight: bolder;
        }
        .navtop{
            padding: 16px;
            background-color:cornflowerblue;
            text-align: center;
        }
        .titleH3{
            /* text-align: center; */
        }
        .foot{
            padding: 4px;
            background-color: darkgrey;
            text-align: center;
            color: beige;
        }
        .foot p{
            padding-top: 3px;
            line-height: 0px;
        }
        .ksTitle{
            color:black;
        }
    </style>
</head>

<body>
    <div class="navtop">
        
        <h3 class="titleH3">通信系 2019-2020学年第二学期期末考试安排 <small>（考试课）</small></h3>
    </div>

    <div class="container">
        <section style="display:none;">
            <div class="top">
                <nav class="navbar navbar-expand navbar-light bg-info">
                    <span>
                        <h3>通信系 2019-2020学年第二学期期末考试安排 <small>（考试课）</small></h3>
                    </span>
                </nav>
            </div>
        </section>

        <section>
            <div id="ksList" class="row row-cols-lg-3 row-cols-md-2 row-cols-sm-1">


                <div class="ksItem" style="display:none;">
                    <div class="card text-white bg-primary">
                        <img class="card-img-top itemHimg" src="./img/kaos6.jpg" alt="">
                        <div class="card-body">
                            <h4 class="card-title">《嵌入式系统技术》 <span class="badge badge-dark">今日开考</span></h4>
                            <p class="card-text">考试日期：</p>
                            <p>距离开考还有: <span class="rematTime">1天12小时20分14秒</span> </p>
                            <p>考试平台：课堂派</p>
                            <p>参考班级： 18111、18112、18141、18142、18181、18182</p>
                        </div>
                    </div>
                </div>

            </div>

        </section>


        
    </div>

    <div class="foot">
        <!-- <span>12344</span>
        <div class="djs">倒计时：
            <span id="day">90</span>天 -->
            <!-- <span id="hour"></span> 小时
            <span id="min"></span> 分钟
            <span id="sec"></span> 秒</div>
        <button type="button" class="btn btn-primary" onclick="remainsTime(1)">append</button> -->
        <p>上海科学技术职业学院</p>
        <p>通信与电子信息系</p>
        <p>author:杨春雷</p>
    </div>
</body>

<script>

    var jsonData;
    var sortJsonData;
    var courses = Array();


    window.onload = function () {
        var timer;
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(() => {
            reloadRtime();
        }, 1000);

        readJson("kaosanpai.json");
    }

// 排序判断算法
    function sortTim(x,y)
    {
        // console.log(Date.parse(x.testDate));
        // 修正了排序算法，让已结束的考试排到最后
        // if( Date.parse(new Date()) - Date.parse( x.testDate+" "+x.testEnd) )
        // {
        //     return(0);
        // }
        // else{
            return (Date.parse( x.testDate+" "+x.testStart) - Date.parse( y.testDate+" "+y.testStart));
        // }
       
    }

    function readJson(url)
    {
        var request = new XMLHttpRequest();
        request.open("get",url);
        request.send(null);
        request.onload = function(){
            if(request.status == 200)
            {
                jsonData = JSON.parse(request.responseText);
                // console.log(jsonData); 
                sortJsonData = jsonData.Course.sort(sortTim);
                
                // console.log(sortData);
                // console.log(jsonData.Course[0].courseName);
                //遍历每一个json对象，呈现到html页面
                $.each(sortJsonData,couseItemInsert);
            }
        }
    }

    // 将json数据插入到html
    function couseItemInsert(index,item){
        // console.log(item.testStart);

        var htmItem = $('#ksList');

        var remstr = remainsTime(item);

        var tap = testStatu(remstr,item);

        // console.log(htmItem);
        var htmlresultinfo = '<div class="ksItem"> \
             <div class="card text-white bg-primary">\
                <img class="card-img-top itemHimg" src="'+randImg_src()+'" alt="">\
                    <div class="card-body">\
                        <h4 class="card-title ksTitle">《'+item.courseName+'》 '+ tap+'</h4>\
                        <p class="card-text">考试日期：'+item.testDate +" "+ item.testStart+'</p>\
                        <p>距离开考还有：<span id="cls'+item.courseID+'" class="rematTime">'+remainsTime(item)+'</span> </p>\
                        <p>考试平台: '+item.platform+'</p>\
                        <p>参考班级：'+item.Class+'</p>\
                    </div>\
                    </div>\
            </div>';
        // console.log(htmlresultinfo);
        htmItem.append(htmlresultinfo);
    }

    function testStatu(str,item)
    {
        if(str.includes("天"))
        {
            // 含有天，表示考试还没开始
            return " ";
        }else if(str.includes("考试已结束"))
        {
            return " ";
        }
        else if(str.includes("正在考试中"))
        {
            return "<span class='badge badge-danger'>正在考试中</span>";
        }
        else
        {
            // 还要判断日期是否为当日
            var today_Date = FormatDate(new Date());
            if(today_Date == item.testDate)
            {
                return "<span class='badge badge-warning'>今日开考</span>";
            }
            else{
                return "";
            }
            
        }
    }

    function FormatDate (strTime) {
            var date = new Date(strTime);
            return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
        }


    //
    function remainsTime(citem)
    {
        var tstart;
        var tend;
        tstart = citem.testDate+" "+citem.testStart+":00";
        tstart = Date.parse(tstart);
        // console.log((tstart));

        tend = citem.testDate+" "+citem.testEnd+":00";
        tend = Date.parse(tend);
        // console.log((tend));

        var tnow = new Date().getTime();
        // console.log(tnow);
        var trema = tstart - tnow;
        // console.log(trema);
        if(trema < 0){
            if(tnow > tend){
                return "考试已结束"
            }
            else{
                return "正在考试中..."
            }
            
        }
        else{

            trema = parseInt( trema / 1000);
            var oDay = parseInt(trema/(24*60*60));
            var oHour = parseInt(trema%86400/(60*60));
            var oMin =parseInt(trema%86400%3600/60);
            var oSec =parseInt(trema%60);
            var strret;
            if(oDay != 0)
            {
                strret = oDay+"天"+oHour+"小时"+oMin+"分"+oSec+"秒";
            }
            else{
                strret = oHour+"小时"+oMin+"分"+oSec+"秒";
            }
            

            return strret;
        }
        

        // var htmlstr;
        // $("#cls"+citem.courseID).html(Date.parse(tstart));
        // return new Date();
    }

// 定时刷新考试剩余时间
    function reloadRtime() {
        $.each(sortJsonData,function(i,item){
            // console.log(item);
            var insstr = remainsTime(item);
            // console.log(i+"  "+insstr);

            $("#cls"+item.courseID).html(insstr);
            
        });
    }

    // 随机尝试 img地址
    function randImg_src(){
        var randnum;
        randnum = parseInt(Math.random()*(10-1+1)+1,10);

        return "./img/kaos"+randnum+".jpg"; 
    }
    
</script>

</html>